import React, { useEffect, useState } from 'react';
import './index.less';

class PortalProps {
  // 传入样式style
  style?: React.CSSProperties | undefined;
  // 子节点
  children?: React.ReactNode;
  // className
  className?: string;
  // 外层阴影
  elevation? = 0 as number;
}

const Card: React.FC<PortalProps> = (props: PortalProps) => {
  const [style, setStyle] = useState<React.CSSProperties | undefined>();

  useEffect(() => {
    setStyle({ ...style, ...props?.style });
  }, [props?.style]);
  return (
    <div
      className={`card-song-style${
        props?.elevation ? ' song-card-elevation-' + props?.elevation : ''
      } ${props?.className || ''}`}
      style={style}
    >
      {props?.children}
    </div>
  );
};

export default Card;
